<template>
  <div class="app-container projectList">
    <!-- 查询条件 -->
    <avue-form :option="queryFormOption" v-model="queryForm">
      <template #menu-form>
        <el-button icon="Search" type="primary" @click="handleSubmit"
          >查询</el-button
        >
        <el-button icon="RefreshLeft" @click="handleEmpty">重置</el-button>
      </template>
    </avue-form>
    <!-- 操作按钮 -->
    <div>
      <el-button type="primary" icon="Plus" @click="handleAdd"
        >意见反馈</el-button
      >
    </div>
    <!-- table 表格 -->
    <el-table
      ref="tableRef"
      class="mt-20px"
      :data="tableData"
      border
      @row-dblclick="handleClickProject"
      v-loading="tableLoading"
      stripe
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="标题">
        <template #default="scope">
          <!-- @click="handleClickProject(scope.row)"
          cursor-pointer text-#1890ff-->
          <div class="truncate">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.title"
              placement="top-start"
            >
              {{ scope.row.title }}
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="反馈类型" key="type" width="100" align="center">
        <template #default="scope">
          <dict-tag :options="feedback_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="处理状态" width="90" align="center">
        <template #default="scope">
          <div>
            <span v-if="scope.row.status == '0'"
              ><i
                class="bg-#F59A23 w-6px h-6px rounded inline-block mr-5px align-middle"
              ></i
              >未处理</span
            >
            <span v-else>
              <i
                class="bg-#19BE6B w-6px h-6px rounded inline-block mr-5px align-middle"
              ></i
              >已处理</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="moduleName" label="模块名称">
        <template #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.moduleName"
            placement="top-start"
          >
            {{ scope.row.moduleName }}
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="提出人" width="100" />
      <el-table-column prop="deptName" label="提出单位" />
      <el-table-column
        label="创建时间"
        prop="createTime"
        width="160"
        align="center"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="tableTotal > 0"
      :total="tableTotal"
      v-model:page="queryForm.pageNum"
      v-model:limit="queryForm.pageSize"
      @pagination="getList"
    />
    <!-- 弹出框下拉框 -->
    <SelectDialog
      :dialog-param="dialogParam"
      @ok="selectDialogData"
      @close="dialogParam.isDialog = false"
    ></SelectDialog>
  </div>
</template>
<script setup name="OpinionManagement">
import { useRouter } from 'vue-router'
import { getPricipalId } from '@/utils/commo'
import * as API from '@/api/system/opinion'
import useCommonStore from '@/store/modules/common'
const commonStore = useCommonStore()
// 通用数据store
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const { feedback_type } = proxy.useDict('feedback_type')
// 处理状态
const statuOption = ref([
  { label: '待处理', value: '0', id: 1 },
  { label: '已处理', value: '1', id: 2 }
])
const principalIdsOption = ref([]) //选择人
// 设置参数
const data = reactive({
  dialogParam: {},
  tableLoading: false, //
  queryForm: {
    type: null,
    status: null,
    pageNum: 1,
    pageSize: 10
  },
  // 查询条件form表单配置
  queryFormOption: {
    labelWidth: 10,
    menuSpan: 6,
    submitBtn: false,
    emptyBtn: false,
    column: [
      {
        prop: 'keyword',
        placeholder: '请输入关键字',
        type: 'input',
        maxlength: 50,
        span: 4
      },
      {
        prop: 'type',
        placeholder: '请选择反馈类型',
        type: 'select',
        span: 3,
        dicData: feedback_type
      },
      {
        prop: 'status',
        placeholder: '请选择项处理状态',
        type: 'select',
        span: 3,
        dicData: statuOption
      },
      {
        prop: 'createByUUID',
        placeholder: '请选择提出人',
        type: 'select',
        multiple: true,
        span: 4,
        props: {
          value: 'uuid'
        },
        clearable: false,
        dicData: principalIdsOption,
        click: ({ value, column }) => {
          // 3. 传递数据（下面字段都是必传）
          dialogParam.value.type = 'createBy'
          dialogParam.value.title = '请选择提出人'
          dialogParam.value.isDialog = true
          dialogParam.value.multiple = true
          dialogParam.value.nodeKey = 'uuid'
          dialogParam.value.defaultCheckedKeys = queryForm.value.createByUUID
          dialogParam.value.dataType = 'person'
        }
      },
      {
        type: 'daterange',
        prop: 'bidOpeningTime',
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间',
        span: 4,
        change: ({ value, column }) => {
          queryForm.value.bidOpeningTime = value
        }
      }
    ]
  },
  // table 总数据
  tableTotal: 0,
  //table 数据
  tableData: []
})
const {
  dialogParam,
  tableLoading,
  queryForm,
  queryFormOption,
  tableData,
  tableTotal
} = toRefs(data)
//查询按钮操作
const handleSubmit = () => {
  queryForm.value.pageNum = 1
  getList()
}
// 重置按钮操作
const handleEmpty = () => {
  queryForm.value = {
    keyword: null,
    type: null,
    status: null,
    createByUUID: null,
    createId: [],
    bidOpeningTime: null,
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

// 意见反馈
const handleAdd = () => {
  router.push({
    path: '/rsgl/other/feedbacks'
  })
}

//查询table列表
function getList() {
  tableLoading.value = true
  let param = { ...queryForm.value }
  param.startTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[0] + ' 00:00:00'
      : ''
  param.endTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[1] + ' 23:59:59'
      : ''
  param.createId = queryForm.value.createByUUID
    ? getPricipalId(principalIdsOption.value, queryForm.value.createByUUID)
    : []
  delete param.bidOpeningTime
  delete param.createByUUID
  delete param.$createByUUID
  delete param.$status
  delete param.$type
  API.sysAdviceList(param).then(res => {
    tableLoading.value = false
    tableData.value = res.rows
    tableTotal.value = res.total
  })
}
/** 弹出框下拉框
 * 项目负责人，客户名称，归属单位
 * @param {*} val  selectDialog组件返回的值
 */
const selectDialogData = val => {
  switch (val.type) {
    case 'createBy':
      principalIdsOption.value = val.selectData
      queryForm.value.createByUUID = val.defaultCheckedKeys
      break
  }
}
// 项目名称点击
const handleClickProject = row => {
  router.push({
    path: '/rsgl/other/feedbacks',
    query: { id: row.id }
  })
}

getList()
</script>
<style lang="scss">
.projectList .avue-form__menu.avue-form__menu--center {
  text-align: left !important;
}
// .projectList .avue-form__group .avue-form__row {
//   margin-left: 10px;
// }
</style>
